<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>魚王のメモ帳</title>
    <style>

        ul,li{list-style:none;}
        button{
            font-size: 100%;
            border: 0;
        }
        li button{
            display: none;
        }
        li:hover button{
            display: inline-block;
        }
        label{
            cursor: default;
        }
        .line-list li label{
            word-break: break-all;
            line-height: 2;
            transition: color 0.4s;
        }
        .new-line{
            padding: 8px 10px 8px 10px;
            font-size: 17px;
        }
        .line{
            text-align: left;
        }
        .header{
            margin: 0 auto;
            
            text-align: center;
        }
        .main{
            display: flex;
            margin-left:10%;
        }
        #line{
            margin: 70px 0;
            position: relative;
        }
        .footer:before{
            content:'';
            display: inline-block;
            vertical-align: middle;
            height: 100%;
        }
        .footer{
            color: #777;
            padding:10px 15px;
            height: 20px;
            text-align: center;
            border-top:1px solid #e6e6e6;
        }
        footer{
            display: block;
        }
        .footer-info{
            color:#2779bd;
            margin-bottom: 27px;
            text-align: center;
        }
        .yuyuyu{
            color:#2779bd;
            margin:0 8px 0 5px;
            
        }
        .line-count{
            float: left;
            position: relative;
        }
        .line-clear{
            float:right;
            position: relative;
            line-height: 20px;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
</head>
<div class="allline">
    <section id='line'>
        <header class="header">
            <h1>鱼王のメモ帳</h1>
            <input @keyup.enter='add' v-model='inputvalue' autofocus='autofocus' autocomplete="off" placeholder="请输入记事内容" class="new-line" />
        </header>
        <section class="main">
            <ul class="line-list">
                <li v-for='(item,index) in list'>
                    <div>
                        <span class="index">{{index+1}}</span>
                        <label>{{item}}</label>
                        <button @click='del(index)'>x</button>
                    </div>
                </li>
            </ul>

        </section>
        <footer class="footer">
            <span class='line-count'>
                当前存在 <strong>{{list.length}}</strong> 条目
            </span>
            <button class="line-clear" @click='clear' v-show='list.length!=0'>
                清空
            </button>
        </footer>
        <footer class="footer-info">
            <div>
                <a class='yuyuyu'href="https://space.bilibili.com/6883700">bilibili</a>
                |
                <a class='yuyuyu' href="https://yzhzbys.gitee.io/vue">鱼王的vue</a>
                |
                <a class="yuyuyu" href="https://yzhzbys.gitee.io/e7-tools/">e7装备评分工具</a>
                |
                <a class="yuyuyu" href="http://yzhzbys.gitee.io/vue/tianqi.html">天气预报</a>
                |
                <a class="yuyuyu" href="https://yzhzbys.gitee.io/vue/yinyue.html">音乐</a>
            </div>
        </footer>

    </section>
    <footer class="info"></footer>
</div>

<script>
var app1 = new Vue({
    el:"#line",
    data:{
        message:"Hello YuWang!",
        inputvalue:'',
        list:[
            '魚王のメモ帳',
        ],
    },
    methods:{
        add(){
            this.list.push(this.inputvalue);
            this.inputvalue='';
        },
        del(index){
            this.list.splice(index,1);
        },
        clear(){
            this.list=[];
        }
    }
})
</script>
</body>
</html>